<template>
	<view style="padding-bottom: 50rpx;">
      <view v-for="(prod, index) in list"   :key="index" >
        <view>
          <view class="item-cont"  @tap="toOrderDetailPage">
            <view class="prod-pic">
              <image :src="'https://img.mall4j.com/'+prod.pic" />
            </view>
            <view class="prod-info">
              <view class="prodname">
                {{ prod.prodName }}
              </view>
              <view class="price-nums">
                <view class="prodprice">
                  <view class="symbol">
                    单价：￥{{ prod.price }}
                  </view>
                 <view class="prodcount">
                   x{{ prod.prodCount }}
                 </view>
                  <view class="small-num" style="text-align: right;">
                     总价：￥{{ prod.productTotalAmount }}
                  </view>
                </view>
                  <view class="prodprice" >
                    <view class="prodcount">
                     已退款数量： x{{ prod.goodsNum  }}
                    </view>
                    <view>已退款金额：￥{{ prod.refundAmount }}</view>


                  </view>

              </view>
              <view v-if="prod.prodCount-prod.goodsNum!=0">
                <view class="flex">
                  退款数量
                  <view class="num-wrap">
                    <view
                      class="minus"
                      @tap="onCountMinus(index)"
                    >
                      <text class="row" />
                    </view>
                    <view class="text-wrap">
                      <input
                        type="number"
                        :value="prod.prodNum"
                        disabled
                      >
                    </view>
                    <view
                      class="plus"
                      @tap="onCountPlus(prod.prodCount-prod.goodsNum,index)"
                    >
                      <text class="row" />
                      <text class="col" />
                    </view>
                  </view>

                </view>
                <view class="flex" >
                    退款方式：
                    <picker mode="selector" :range="applyState" :value="prod.index1" range-key="name" @change="onChange(index, $event)">
                      <view>{{applyState[prod.index1].name}}</view>
                    </picker>
                </view>
                <view class="flex">
                    退款原因：<textarea name="" v-model="prod.buyerMsg" id="" cols="30" rows="10" placeholder="请输入退款原因"></textarea>
                </view>
                <view v-if="prod.index1==1">
                    <view class="flex">快递公司：<input type="text" name="" id="" v-model="prod.expressName"></view>
                    <view class="flex">快递单号：<input type="text" v-model="prod.expressNo"></view>
                </view>
              </view>

            </view>
          </view>
        </view>
      </view>
      <view @tap="submit" class="sure-bnt"> 确定退款</view>
	</view>
</template>

<script setup>
  const list=ref([])

  const applyState=ref([{
    id:1,
    name:'仅退款'
  },{
    id:2,
    name:'退货退款'
  }])
  onLoad((options) => {
    getlist(options.orderNum)
  })
  const onChange = (index, event) =>{
    console.log(index +',' + event.detail.value)
    list.value[index].index1= event.detail.value

  }
  const  getlist = (orderNumber) =>{
    uni.showLoading()
    http.request({
      url: '/p/orderRefund/getOrderRefundDetails',
      method: 'GET',
      data: {
       orderNumber: orderNumber,
      }
    })
      .then(({ data }) => {
        console.log(data)

         data.forEach(item=>{
           item.prodNum=1
           item.buyerMsg=''
           item.expressName=''
           item.expressNo=''
           item.applyType=''
           item.express=false
           item.index1 = 0
         })
         list.value = data
         console.log(list)
        uni.hideLoading()
      })
  }
  const submit=()=>{
    uni.showLoading()
    let rlist=[]
    list.value.forEach(item=>{
       rlist.push({
         orderItemId:item.orderItemId,
         applyRefundNumber:item.prodNum,
         applyType:applyState.value[item.index1].id,
         buyerMsg:item.buyerMsg,
         expressName:item.expressName,
         expressNo:item.expressNo,
       })
    })
    console.log(rlist)
    http.request({
      url: '/p/orderRefund/submitRefundApply',
      method: 'POST',
      data: rlist
    })
      .then(({ data }) => {
        console.log(data)
        if(data==true){
          uni.navigateTo({
            url: '/pages/orderList/orderList'
          })
        }
        uni.hideLoading()
      })
  }
  const onCountMinus=(index)=>{
    if (list.value[index].prodNum > 1) {
      list.value[index].prodNum = list.value[index].prodNum - 1
    }
  }
  const onCountPlus = (num,index) => {
    console.log(list.value[index].prodNum)
    if (list.value[index].prodNum < num) {
      list.value[index].prodNum = list.value[index].prodNum + 1
    }
  }
</script>

<style scoped lang="scss">
  @use './returnOrder.scss';

</style>
